<template>
	<view class="page" v-if="Object.keys(detail).length > 0">
		<navHead :datas="headData"></navHead>
		<view class=" pd-30">
			<view class="progress_box bd-r40 pd-20">
				<view class="progress_bar_box">
					<view class="progress_bar_item flex-bwt">
						<view class="item " v-for="(item, index) of ['提交申请', '客服处理中', detail.info.status]" :key="index"
							:style="{ flex: index < 2 ? 1 : 0 }">
							<view class="flex-center">
								<view class="icon"
									:class="{ active: (detail.info.status == '客服处理中' && index == 1) || (detail.info.status != '客服处理中' && index == 2) }">
								</view>
								<view class="solid ml-10 mr-10" v-if="index < 2"
									:class="{ solitActive: index == 0 || detail.info.status != '客服处理中' }">
								</view>
							</view>
						</view>

					</view>
					<view class="progress_bar_text flex-bwt mt-10">
						<view class="item" v-for="(item, index) of ['提交申请', '客服处理中', detail.info.status]" :key="item">
							<view class="text c-99 ft-24"
								:class="{ active: (detail.info.status == '客服处理中' && index == 1) || (detail.info.status != '客服处理中' && index == 2) }">
								{{ index == 2 ? (detail.info.status == '客服处理中' ? '已完成' : detail.info.status) : item }}
							</view>
						</view>
					</view>
					<!-- 进度提示 -->
					<view class="progress_bar_title bd-r20 ft-22 c-66 flex mt-20 pd-20">
						<image class="icon_samll mr-8"
							src="https://cdn.oss.bon-top.cn/static_bc/images/warning_icon.png" mode="aspectFit">
						</image>
						<!-- <view>您的订单<span class="fw-800 c-33">{{ '“退款售后”' }}</span>，正在处理中</view> -->
						<view v-html="detail.info.status_txt"></view>
					</view>
					<view class="progress_bar_msg mt-20">
						<view class="msg bd-r20 pd-20 ">
							<view class="progress_bar_content ft-24">
								<view class="tip  c-33 fw-800">
									{{ '服务进度' }}
								</view>
								<view class="text c-66">
									<view v-html="detail.info.last_progress_txt"></view>
									<!-- 								<view> 已为您安排了售后经理<span class="c-33 fw-800">"Wilson钟俊华,<span style="color: blue;">18900000000</span>"</span> 跟进您的订单，稍后将会联系您。 </view> -->
								</view>
							</view>
						</view>
						<view class="more-btn ft-24 c-33 flex-center pd-20"
							@click="goPage('/subpackage/refund/ServiceProgress?id=' + id)">
							{{ '查看更多' }}
							<image class="icon_samll ml-8 mt-4"
								src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFit">
							</image>
						</view>

					</view>
				</view>

			</view>
			<view class="refundDetail_box pd-20 bd-r20 mt-20">
				<view class="ft-28 c-33 fw-800 ">
					退款去向
				</view>
				<view class="title ft-24 c-66 pd-20 bd-r20 mt-20">
					{{ '您的售后订单' + detail.info.status }}
				</view>
				<view class="more-btn ft-24 c-33 flex-center pd-20"
					@click="goPage('/subpackage/refund/refundDestination?id=' + id)">
					{{ '查看更多' }}
					<image class="icon_samll ml-8 mt-4" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"
						mode="aspectFit">
					</image>
				</view>
			</view>
			<view class="list_box pd-20 mt-20 bd-r40">
				<view class="ft-28 c-33 fw-800 ">
					售后订单
				</view>
				<view class="list_item bd-r20 pd-20" @tap="goDetail(detail.order_info)">
					<image class="imgs bd-r40" :src="detail.order_info.cover" mode="aspectFill">
					</image>
					<view class="right_box ml-20 te-wid mt-10 c-33">
						<view class="title te-1 ft-28 fw-800">
							{{ detail.order_info.title }}
						</view>
						<view class="c-99 ft-24 te-1 mt-10">
							{{ detail.order_info.goods_name }}
						</view>
						<view class="money_text ft-20 fw-800 mt-30">
							{{ '￥' }}
							<span class="ft-36 ft-num3 fw-900">{{ detail.order_info.total_price }}</span>
							{{ '元' }}
						</view>

					</view>
				</view>
				<view class="list_messge">
					<view class="ft-24 c-33 flex-bwt">
						<span class="fw-800">申诉内容</span>
						<span class="c-99 fw-400">{{ detail.info.created_at }}</span>
					</view>
					<view class="text ft-24 c-66 mt-10" v-if="detail.info.content">
						{{ detail.info.content }}
					</view>
					<view class="imgList flex mt-20" v-if="detail.info.images && detail.info.images?.length > 0">
						<template v-for="i of detail.info.images" :key="i">
							<image class="imgs bd-r20" :src="i" @click="openImg(index, detail.info.images)"
								mode="aspectFill" />
						</template>
					</view>
				</view>
				<view class="list_detail ft-24 c-99">
					<view class="list_detail_item flex-bwt">
						<text>订单编号</text>
						<view class="c-33 flex">
							<up-copy :content="detail.order_info.ordernum">
								<view class="btn mr-10">
									复制
								</view>
							</up-copy>
							{{ detail.order_info.ordernum }}
						</view>
					</view>
					<view class="list_detail_item flex-bwt">
						<text>创建订单时间</text>
						<view class="c-33 flex">
							{{ detail.order_info.created_at }}
						</view>
					</view>

					<view class="list_detail_item flex-bwt">
						<text>售后申请时间</text>
						<view class="c-33 flex">
							{{ detail.info.created_at }}
						</view>
					</view>
					<view class="list_detail_item flex-bwt">
						<text>售后完成时间</text>
						<view class="c-33 flex">
							{{ detail.info.finish_time }}
						</view>
					</view>
					<view class="list_detail_item flex-bwt">
						<text>申请类型</text>
						<view class="c-33 flex">
							{{ detail.info.type }}
						</view>
					</view>
					<view class="list_detail_item flex-bwt">
						<text>申请原因</text>
						<view class="c-33 flex">
							{{ detail.info.reason }}
						</view>
					</view>
					<view class="list_detail_item flex-bwt">
						<text>退款方式</text>
						<view class="c-33 flex">
							{{ detail.info.refund_type }}
						</view>
					</view>
				</view>
			</view>
			<!-- 占位 -->
			<view style="height: 140rpx;">

			</view>
			<view class="bottom">
				<view class="btn" @click="changeOrder('delete')" v-if="detail.info.status !== '客服处理中'">
					删除
				</view>
				<view class="btn active" @click="changeOrder('cancel')" v-if="detail.info.status == '客服处理中'">
					撤销售后
				</view>
			</view>
		</view>
	</view>
	<!-- <dialogPop ref="diaLogPop" :option="option" @confirm='confirm' @cancel='cancel'></dialogPop> -->
	<dialogPop ref="diaLogPop" :show="showModal" title="撤销售后" content='确定要撤回售后吗？' @confirm='confirm' @cancel='cancel'>
	</dialogPop>
</template>

<script setup lang="js">
import {
	ref,
	reactive
} from 'vue';
import dialogPop from '@/components/dialogPop.vue';
import {
	onLoad
} from '@dcloudio/uni-app';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';

import navHead from '@/components/navHead.vue';
const headData = reactive({
	color: '#fff',
	title: '退款/售后详情'
})

const option = reactive({
	html: `撤销售后`,
	title: '确定要撤回售后吗？',
})
const showModal = ref(false)

// 弹窗取消时处理逻辑
const cancel = () => {
	console.log('取消取消')
	showModal.value = false

}
const goDetail = (data) => {
	let url = ''
	console.log('data', data)
	if (data.type == 2) {//老师
		url = `/subpackage/teacher/teacherDetail?id=${data.sale_id}`
	} else if (data.type == 3) {
		//会员
		url = `/subpackage/openVip/openVip`
	} else {
		// 产品
		url = `/subpackage/immigration/immigration?id=${data.product_id}`
	}
	uni.navigateTo({
		url: url
	})
}
// 图片预览
const openImg = (index, imgList = []) => {
	uni.previewImage({
		current: index,
		urls: imgList
	});
}
// 弹窗删除提交
const confirm = () => {
	showModal.value = false

	if (handCode.value == 'delete') {
		utils
			.request(
				api.deleteRefund, {
				id: id.value
			},
				"post"
			)
			.then((res) => {
				uni.redirectTo({
					url: '/subpackage/refund/myRefund'
				})
			});
	} else if (handCode.value == 'cancel') {
		utils
			.request(
				api.closeRefund, {
				id: id.value
			},
				"post"
			)
			.then((res) => {
				loadData()
			});
	}
}
// 打开弹窗
const diaLogPop = ref('diaLogPop')
const handCode = ref('')
const changeOrder = (code) => {
	if (code == 'delete') {
		option.html = '删除'
		option.title = '确定要删除吗？'
	} else if (code == 'cancel') {
		option.html = '撤销售后'
		option.title = '确定要撤回售后吗？'
	}
	showModal.value = true

	handCode.value = code
}
// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
	});
}
const progressVal = ref(1)

const id = ref('')
const detail = ref({})
const loadData = () => {
	utils
		.request(
			api.getRefundDetail, {
			id: id.value
		},
			"get"
		)
		.then((res) => {
			detail.value = res.data
		});
}
onLoad(option => {
	id.value = option?.id || ''
	loadData()
})
</script>

<style lang="scss" scoped>
.progress_box {
	background-color: #F8F8F8;

	.progress_bar_box {
		.progress_bar_text {
			.item {
				min-width: 100rpx;
				// background: red;
				text-align: center;
			}

			.active {
				color: #333;
				font-weight: 800;
			}
		}

		.progress_bar_item {
			padding: 0 40rpx;

			.item {
				// display: flex;
				// background-color: red;

				// flex: 1;
				.icon {
					width: 16rpx;
					height: 16rpx;
					background-color: #333;
					border-radius: 50%;
				}

				.active {
					background-color: #DBF046;
					border: 6rpx solid #333;
				}

				.solid {
					// width: 228rpx;
					flex: 1;
					height: 2rpx;
					background-color: #F1F1F1;
				}

				.solitActive {
					background-color: #333;

				}
			}
		}
	}

	.progress_bar_title {
		background: linear-gradient(to bottom, #fff, #ffffff4d);
		border-bottom: 2rpx solid #F1F1F1;
	}

	.progress_bar_msg {
		.msg {
			background-color: #fff;
		}

		.more-btn {
			width: 650rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
			border-radius: 0rpx 0rpx 40rpx 40rpx;
		}

	}
}

.refundDetail_box {
	background-color: #F8F8F8;

	.title {
		background-color: #fff;
	}

	.more-btn {
		width: 650rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}
}

.list_box {
	background-color: #F8F8F8;

	.list_item {
		background-color: #fff;
		display: flex;

		.imgs {
			width: 142rpx;
			height: 174rpx;
			flex-shrink: 0;
		}
	}

	.list_messge {
		border-bottom: 2rpx solid #ececec;
		padding: 20rpx 0;
	}

	.imgList {
		flex-wrap: wrap;
		gap: 20rpx;

		.imgs {
			width: 106rpx;
			height: 136rpx;
			flex-shrink: 0;
		}
	}

	.list_detail {
		&_item {
			padding: 10rpx 0;

			.btn {
				background-color: #F1F1F1;
				padding: 10rpx;
				border-radius: 8rpx;
				color: #666;
			}
		}
	}

}

.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 140rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: #F8F8F8;
	box-sizing: border-box;

	.btn {
		height: 78rpx;
		width: 192rpx;
		line-height: 78rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		background-color: #F1F1F1;
		border-radius: 20rpx;
		margin-right: 30rpx;
	}

	.active {
		background-color: #333;
		color: #fff;
	}
}
</style>